<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="ajax-service.html">

<polymer-element name="ajax-button" attributes="label url params method">
    <template>
        <paper-button label="{{label}}" raisedButton
                      on-click="{{btn_click}}"></paper-button>
        <ajax-service id="ajax" url="{{url}}" on-core-response="{{a_response}}"
                      handleAs="json" method="{{method}}" params="{{params}}"></ajax-service>
    </template>
    <script>
        Polymer('ajax-button', {
            /**
             * Fired when a ajax response is received.
             *
             * @event ab-response
             */
            label: '',
            url: '',
            params: '',
            method: '',
            btn_click: function () {
                if(this.method == 'delete'){
                    var r = confirm("Are you sure to delete?");
                    if (r) this.$.ajax.go();
                }else this.$.ajax.go();
            },
            a_response: function () {
                var res = this.$.ajax.response;
                this.fire('ab-response', {response: res});
            }
        });
    </script>
</polymer-element>
